<template>
  <div class="cart_content">
    <div class="prod-list">
      <div class="cart_list" v-if="cartData">
        <div class="port_blodk">
          <div class="discount-tips"></div>
          <div v-for="item in cartData" :key="item.basketId" class="cart_item">
            <div>
              <span>
                <van-checkbox
                  :value="item.flag"
                  @click="choice(item)"
                  @change="onChange(item)"
                ></van-checkbox>
              </span>
            </div>
            <div class="prodinfo">
              <div><img :src="item.pic" alt="" class="cart_img" /></div>
              <div class="opt">
                <div class="prod-name">{{ item.prodName }}</div>
                <div class="prod-info-text">{{ item.skuName }}</div>
                <div class="price-count">
                  <div class="price">
                    <span class="symbol">￥</span>
                    <span class="big-num">{{
                      item.price ? item.price.toFixed(0) : 0
                    }}</span>
                    <span class="small-num">{{
                      item.price && `${item.price}`.toString().split(".")[1]
                        ? `.${item.price.toString().split(".")[1]}`
                        : ".00"
                    }}</span>
                  </div>
                  <div class="m-numSelector">
                    <div class="minus" @click="del(item)"></div>
                    <span class="cart_list_cont">{{ item.prodCount }}</span>
                    <div class="plus" @click="add(item)"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cart_footer" v-if="cartData">
        <div class="btn_all">
          <span class="btn_all_span">
            <van-checkbox
              :value="checkAllFlag"
              @click="choice(item)"
              @change="SelectAll"
            ></van-checkbox>
            全选
          </span>
        </div>
        <div class="btn_del">
          <span @click="delCart"
            >删除
            <van-toast id="van-toast" />
            <van-dialog id="van-dialog" />
          </span>
        </div>
        <div class="btn_total">
          <div>
            <span>合计:</span>
            <div class="price">
              <span class="symbol">￥</span>
              <span class="big-num">{{
                tatalPayData.finalMoney ? tatalPayData.finalMoney.toFixed(0) : 0
              }}</span>
              <span class="small-num">{{
                tatalPayData.finalMoney &&
                `${tatalPayData.finalMoney}`.toString().split(".")[1]
                  ? `.${tatalPayData.finalMoney.toString().split(".")[1]}`
                  : `.00`
              }}</span>
            </div>
          </div>
        </div>
        <div class="btn_settle" @click="settlement">
          <span
            >结算
            <van-toast id="van-toast" />
          </span>
        </div>
      </div>
    </div>
    <div class="empty" v-if="!cartData">
      <div class="img">
        <img src="../../static/images/tabbar/basket.png" alt="" />
      </div>
      <div class="txt">您还没有添加任何商品哦~</div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import Toast from "../../vant/toast/toast";
import Dialog from "../../vant/dialog/dialog";
export default {
  data() {
    return {
      tatalArr: [],
      show: false,
    };
  },
  onLoad() {},
  computed: {
    ...mapState("cart", {
      cartData: (state) => state.cartData,
      tatalPayData: (state) => state.tatalPayData,
      checkAllFlag: (state) => state.checkAllFlag,
    }),
  },
  methods: {
    ...mapActions("cart", [
      "getCart",
      "gettotalPay",
      "getProdCount",
      "getChageItem",
      "getdeleteItem",
    ]),
    ...mapMutations("cart", ["setcartData", "settatalPayData", "setPayData"]),
    ...mapMutations("submitOrder", ["setAddrID"]),
    // 单选
    onChange(val) {
      console.log(val);
      if (!val.flag) {
        this.tatalArr.push(val.basketId);
      } else {
        let index = this.tatalArr.indexOf(val.basketId);
        this.tatalArr.splice(index, 1);
      }
      this.setcartData(val.basketId);
      this.gettotalPay(this.tatalArr);
    },
    // ++
    add(item) {
      let prodId = item.prodId,
        skuId = item.skuId,
        shopId = item.shopId;
      let id = item.basketId;
      this.setPayData({ id, option: "+" });
      this.getChageItem({ count: 1, prodId, skuId, shopId });
      this.gettotalPay(this.tatalArr);
      this.getProdCount();
    },
    // --
    del(item) {
      let prodId = item.prodId,
        skuId = item.skuId,
        shopId = item.shopId;
      let id = item.basketId;
      if (item.prodCount > 1) {
        this.getChageItem({ count: -1, prodId, skuId, shopId });
        this.gettotalPay(this.tatalArr);
        this.getProdCount();
        this.setPayData({ id, option: "-" });
      }
    },
    // 全选
    SelectAll() {
      if (this.checkAllFlag) {
        this.tatalArr = [];
      } else {
        this.cartData.forEach((item) => {
          this.tatalArr.push(item.basketId);
        });
      }
      this.settatalPayData(!this.checkAllFlag);
      this.gettotalPay(this.tatalArr);
    },
    // 删除
    delCart() {
      let flag = this.cartData.some((item) => {
        return item.flag;
      });
      if (!flag) {
        Toast("请选择商品");
      } else {
        Dialog.confirm({
          message: "确认要删除选中的商品吗？",
        })
          .then(() => {
            Dialog.close();

            this.getdeleteItem(this.tatalArr);
            this.getCart();
            this.gettotalPay([]);
          })
          .catch(() => {
            Dialog.close();
          });
      }
    },
    // 结算
    settlement() {
      if (this.tatalArr.length > 0) {
        wx.setStorageSync("basketIds", JSON.stringify([...this.tatalArr]));
        wx.navigateTo({
          url: "/pages/submit-order/index?orderEntry=0",
        });
      } else {
        Toast("请选择商品");
      }
    },
  },
  mounted() {
    this.getCart();
    this.gettotalPay(this.tatalArr);
    this.getProdCount();
  },
};
</script>

<style scoped>
/* 没有数据情况下 */
.empty {
  font-size: 28rpx;
  color: #666;
}
.empty .img {
  margin-top: 80rpx;
  text-align: center;
}
.empty .img img {
  width: 80rpx;
  height: 80rpx;
}
.empty .txt {
  text-align: center;
  margin-top: 30rpx;
}
/*  */
.prod-list {
  padding-bottom: 118rpx;
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.cart_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row nowrap;
  height: 98rpx;
  border-top: 2rpx solid #f4f4f4;
  z-index: 999;
}
.port_blodk {
  background: #fff;
  margin-top: 15rpx;
}
.discount-tips {
  /* padding: 20rpx 0 20rpx 20rpx; */
  border-bottom: 2rpx solid #f4f4f4;
  /* height: 40rpx; */
  line-height: 40rpx;
}
.cart_item {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 20rpx;
}
.prodinfo {
  position: relative;
  color: #999;
  width: 100%;
  display: flex;
  margin-left: 20rpx;
}
.prodinfo::after {
  content: "";
  background-color: #f4f4f4;
  left: 0;
  height: 1px;
  transform-origin: 50% 100% 0;
  bottom: -20rpx;
  position: absolute;
  display: block;
  width: 642rpx;
  padding-left: 20rpx;
}
.cart_img {
  text-align: center;
  width: 180rpx;
  height: 180rpx;
  line-height: 180rpx;
  font-size: 0;
}
.cart_img img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  width: 320px;
  height: 240px;
  display: inline-block;
  overflow: hidden;
}
.opt {
  font-size: 28rpx;
  margin-left: 20rpx;
  width: 100%;
}
.prod-name {
  color: #333;
  max-height: 72rpx;
  line-height: 36rpx;
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod-info-text {
  color: #999;
  display: inline-block;
  -webkit-line-clamp: 1;
  height: 48rpx;
  line-height: 48rpx;
  background: #f9f9f9;
  padding: 0 10rpx 0 10rpx;
  border-radius: 4rpx;
  margin: 10rpx 0 0rpx 0;
  overflow: hidden;
  font-size: 24rpx;
  position: relative;
  font-family: arial;
}
.price-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price {
  color: #eb2444;
  font-family: Arial;
  display: inline-block;
  padding-bottom: 10rpx;
  padding-left: 10rpx;
}
.symbol {
  font-size: 24rpx;
}
.big-num {
  font-size: 32rpx;
}
.small-num {
  font-size: 24rpx;
}
.m-numSelector {
  float: right;
}
.minus {
  border-right: 0;
  border-top-left-radius: 4rpx;
  border-bottom-left-radius: 4rpx;
  position: relative;
  width: 56rpx;
  float: left;
  box-sizing: border-box;
  height: 56rpx;
  border: 2rpx solid #d9d9d9;
}
.minus:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: " ";
  width: 22rpx;
  height: 3rpx;
  background-color: #7f7f7f;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
}
.cart_list_cont {
  width: 56rpx;
  text-align: center;
  color: #333;
  float: left;
  box-sizing: border-box;
  height: 56rpx;
  border: 2rpx solid #d9d9d9;
  cursor: auto;
  display: block;
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
  font-family: UICTFontTextStyleBody;
  min-height: 1.4rem;
  line-height: 1.4rem;
}
.plus {
  border-left: 0;
  border-top-right-radius: 4rpx;
  border-bottom-right-radius: 4rpx;
  position: relative;
  width: 56rpx;
  float: left;
  box-sizing: border-box;
  height: 56rpx;
  border: 2rpx solid #d9d9d9;
}
.plus:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: " ";
  width: 3rpx;
  height: 22rpx;
  background-color: #7f7f7f;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
}
.plus:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: " ";
  width: 22rpx;
  height: 3rpx;
  background-color: #7f7f7f;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
}

.btn_all {
  width: 150rpx;
  font-size: 26rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  background: rgba(255, 255, 255, 0.95);
}
.btn_all_span {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}
.btn_del {
  color: #eb2444;
  display: flex;
  width: 70rpx;
  font-size: 22rpx;
  text-align: left;
  display: block;
  line-height: 102rpx;
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  background: rgba(255, 255, 255, 0.95);
}
.btn_total {
  width: 300rpx;
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  background-color: #fafafa;
  background: rgba(255, 255, 255, 0.95);
  font-size: 28rpx;
}
.btn_settle {
  width: 200rpx;
  background: #eb2444;
  color: #fff;
  position: relative;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}
</style>
